<!-- 评论管理页: 否则开启/关闭 - 某个文章的评论功能 -->
<template>
  <div class="article-container">
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb>
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 主体表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="文章标题"> </el-table-column>
        <el-table-column prop="total_comment_count" label="总评论数"> </el-table-column>
        <el-table-column prop="fans_comment_count" label="粉丝评论数"> </el-table-column>

        <!-- 由于后端回传的数据是数值，而我们要显示出来是对应字符串，
        所以，这里不能直接使用status -->
        <el-table-column prop="comment_status" label="评论状态">
          <template v-slot="scope">
              <!-- type代表el-tag的类型: primary正常蓝, dander红色 -->
            <el-tag :type="scope.row.comment_status ? 'primary' : 'danger'">{{ scope.row.comment_status ? '正常' : '关闭' }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              size="mini"
              type="danger"
              v-if="scope.row.comment_status"
              @click="openOrClose(scope.row, false)"
              >关闭评论</el-button
            >
            <el-button
              size="mini"
              type="primary"
              v-if="!scope.row.comment_status"
              @click="openOrClose(scope.row, true)"
              >打开评论</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件
        它只是根据total和page-size来显示页码，而与具体的表格数据无关

        1. total是总条数数；
        默认情况，它会以每页10条进行计算总页数
        2. current-change。当点击页码时，它会触发,会传入当前的页码。
      -->
      <el-pagination
        style="margin-top: 10px"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="reqParams.page"
        @current-change="pageChange"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { commentListAPI, openOrCloseCommentAPI } from '@/api'
export default {
  name: 'comment',
  data () {
    return {
      tableData: [], // 表格数组
      total: 0, // 总数据量
      reqParams: {
        page: 1,
        per_page: 10
      }
    }
  },
  methods: {
    async getCommentFn () {
      const [err, res] = await commentListAPI(this.reqParams)
      if (err) return
      this.tableData = res.data.data.results
      this.total = res.data.data.total_count
      // 后台返回的数据 是1页10条
      // el-pagination 也是1页10条
    },
    pageChange (page) {
      this.reqParams.page = page
      this.getCommentFn()
    },
    async openOrClose (obj, bool) { // 打开评论点击事件
      const [err] = await openOrCloseCommentAPI({ article_id: obj.id.toString() }, { allow_comment: bool })
      if (err) return
      this.getCommentFn() // 调用完接口, 再重新加载一下当前页面的数据
    }
    // 挑战: 自己优化成一个按钮
  },
  created () {
    this.getCommentFn()
  }
}
</script>

<style scoped lang='less'></style>
